<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th,
        td {
            width: 200px;
            height: 40px;
            text-align: center;
        }
    </style>

 <table border="1px" cellspacing="0">
        <thead>
            <tr>
                <th><input type="checkbox" id="th"></th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>iPhone8</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad pro</td>
                <td>￥5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Air</td>
                <td>￥2000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>小Apple Watch</td>
                <td>￥2000</td>
            </tr>
        </tbody>
    </table>
</head>
<body>
     <script>
        var th = document.querySelector("input");
        var tb = document.getElementById('tb').querySelectorAll("input");
        th.onclick = function () {
            for (var i = 0; i < tb.length; i++) {
                tb[i].checked = th.checked;
            }
        }
        for (var i = 0; i < tb.length; i++) {
            tb[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < tb.length; i++) {
                    if (!tb[i].checked) {
                        flag = false;
                        break;
                    }
                }
                th.checked = flag;
            }
        }
    </script>
</body>
</html>